<template>
    <div class="hngkTitle">
        <div class="titleWord">
            <div class="upContent">
                <div class="upWord">
                    海南概况
                </div>
                <div class="upBtns">
                    <div @click="changeGk" >
                        <img :class="{'active':!opacityState}" src="/data/images/hngk/xia.png" alt="">
                    </div>
                    <div @click="changeFx">
                        <img  :class="{'active':opacityState}" src="/data/images/hngk/shang.png" alt="">
                    </div>

                </div>
            </div>
            <div class="downContent">
                <i>
                    Hainan Overview
                </i>
            </div>
        </div>
    </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  inject
} from 'vue'
import { useRouter } from 'vue-router'
export default {
    setup(){
        const { ctx } = getCurrentInstance();
        const opacityState = ref(false)
        function changeGk(){
            ctx.$parent.currentComponent = "Gk"
            opacityState.value = false
        }
        function changeFx(){
            ctx.$parent.currentComponent = "Fx"
            opacityState.value = true
        }
        onMounted(()=>{
            
        })
        return {
           changeGk,
           changeFx,
           opacityState
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../../assets/varibles.styl'
    .hngkTitle
        position: absolute
        left:vw(462)
        top: vh(128)
        width:vw(162)
        .titleWord
            .upContent
                display:flex
                .upWord
                    font-size:vw(32)
                .upBtns
                    margin-left:vw(16)
                    margin-top:vw(5)
                    height:vh(45)
                    display:flex
                    flex-direction:column
                    justify-content :space-around
                    div
                        img
                            width:vw(16)
                            height:vw(15)
                            cursor pointer
                        .active
                            opacity:.3
            .downContent
                font-size:vw(18)
                font-style:oblique
                margin-top: vh(5)
</style>